<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<link rel="stylesheet" href="js/layer_mobile/need/layer.css" />
		<script type="text/javascript" src="js/layer_mobile/layer.js"></script>
		<!--引入jquery.cookie.js 插件-->
		<script type="text/javascript" src="js/jquery.1.7.2.min.js"></script>
		<script type="text/javascript" src="js/jquery.cookie.js"></script>
	</head>
	<body>
		<input type="button" id="btn" disabled="disabled" value="获取验证码">
		</div>
		<!--逻辑功能代码 -->
		<script>
			$(function() {
				if($.cookie("total") != undefined && $.cookie("total") != 'NaN' && $.cookie("total") != 'null') { //cookie存在倒计时
					timekeeping();
				} else {
					$('#btn').attr("disabled", false);
				}

				function timekeeping() {
					//把按钮设置为不可以点击
					$('#btn').attr("disabled", true);
					var interval = setInterval(function() { //每秒读取一次cookie
						//从cookie 中读取剩余倒计时
						total = $.cookie("total");
						//在发送按钮显示剩余倒计时
						$('#btn').val('请等待' + total + '秒');
						//把剩余总倒计时减掉1
						total--;
						if(total == 0) { //剩余倒计时为零，则显示 重新发送，可点击
							//清除定时器
							clearInterval(interval);
							//删除cookie
							total = $.cookie("total", total, {
								expires: -1
							});

							//显示重新发送
							$('#btn').val('重新发送');
							//把发送按钮设置为可点击
							$('#btn').attr("disabled", false);
						} else { //剩余倒计时不为零

							//重新写入总倒计时
							$.cookie("total", total);
						}

					}, 1000);
				}
				//绑定发送按钮
				$('#btn').click(function(event) {
					var str = "发送短信验证码成功，请注意查看您的手机";
					$.cookie("total", 10);
					timekeeping();
					layer.open({
						content: str,
						time: 2
					});
				})
			})
		</script>
	</body>
</html>